<template>
  <el-dialog
    :title="`${isEdit ? '编辑' : '新增'}管理员`"
    :visible.sync="dialogVisible"
    width="30%"
    :close-on-click-modal="false"
    :before-close="closeHandler"
  >
    <div>
      <el-form
        ref="RefForm"
        :model="formValue"
        label-width="80px"
        :validate-on-rule-change="false"
        :rules="formRules"
        status-icon
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="formValue.name" maxlength="16" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="帐号" prop="loginName">
          <el-input v-model="formValue.loginName" maxlength="16" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="密码" :prop="isCheck ? '' : 'password'">
          <el-input v-model="formValue.password" show-password maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :prop="isCheck ? '' : 'confirmPassword'">
          <el-input v-model="formValue.confirmPassword" show-password maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-radio v-model="formValue.isAdmin" :label="true">管理员</el-radio>
          <el-radio v-model="formValue.isAdmin" :label="false">普通用户</el-radio>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="formValue.isEnable" :label="false">启用</el-radio>
          <el-radio v-model="formValue.isEnable" :label="true">禁用</el-radio>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeHandler">取 消</el-button>
      <el-button
        :loading="loadingSubmit"
        type="primary"
        @click="handleSubmit"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  import { duplicateCheck } from '@/api/api'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        isCheck: false,
        formValue: {
          name: '',
          confirmPassword: '',
          loginName: '',
          password: '',
          isAdmin: false,
          isEnable: false
        },
        formRules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { validator: eleValidator([
              { rule: 'isEmpty', msg: '登录名不能为空' },
              { rule: 'isRepeat', msg: { value: '名称重复', url: '/User/Exists', key: 'name' } },
            ]), trigger: 'blur' }
          ],
          loginName: [
            { required: true, message: '请输入登录名', trigger: 'blur' },
            { validator: eleValidator([
              { rule: 'isEmpty', msg: '登录名不能为空' },
              { rule: 'isRepeat', msg: { value: '登录名重复', url: '/User/Exists', key: 'loginName' } },
              { rule: 'isNumberLetterLine', msg: '只能输入数字字母下划线' },
            ]), trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isPassword', msg: '最少输入位数10；必须包含数字字母和特殊字符；不可输入汉字或3位连续数字或3位相同数字' }
              ]),
              trigger: 'blur'
            }
          ],
          confirmPassword: [
            { required: true, message: '请输入确认密码', trigger: 'blur' },
            { validator: (rule, value, callback) => {
                if (!value) {
                  callback(new Error('确认密码不能为空'))
                } else if (value === this.formValue.password) {
                  callback()
                } else {
                  if (this.formValue.password) {
                    callback(new Error('密码不一致'))
                  } else {
                    callback(new Error('请输入密码再输入确认密码'))
                  }
                }
              }, trigger: 'blur'
            }
          ],
        },
        apiKey: {
          search: '/User/',
          add: '/User',
          put: '/User/'
        },
        timeId: null
      }
    },
    watch: {
      searchValue: function (newValue, oldValue) {
        let formKeys = Object.keys(this.formValue)
        formKeys.forEach(item => {
          this.formValue[item] = newValue[item]
        })
      },
      dialogVisible: function (newValue, oldValue) {
        if (newValue) { return }
        this.$refs.RefForm.clearValidate()
      },
      'formValue.name': {
        deep: true,
        handler: function (newValue, oldValue) {
          this.formData.name = newValue
        }
      },
      'formValue.loginName': {
        deep: true,
        handler: function (newValue, oldValue) {
          this.formData.loginName = newValue
        }
      },
      'formValue.password': {
        deep: true,
        handler: function (newValue, oldValue) {
          if (this.isEdit) {
            // 编辑模式
            if (newValue) {
              this.isCheck = false
            } else {
              this.isCheck = true
            }
          } else {
            // 添加模式
            this.isCheck = false
          }
          this.formData.password = newValue
        }
      },
      'formValue.isAdmin': {
        deep: true,
        handler: function (newValue, oldValue) {
          this.formData.isAdmin = newValue
        }
      },
      'formValue.isEnable': {
        deep: true,
        handler: function (newValue, oldValue) {
          this.formData.isEnable = newValue
        }
      },
    },
    methods: {
      closeHandler () {
        this.formValue = {
          name: '',
          confirmPassword: '',
          loginName: '',
          password: '',
          isAdmin: false,
          isEnable: false
        },
        this.close()
      },
      resetFormData() {
        this.formData = {
          name: '',
          loginName: '',
          password: '',
          isAdmin: false,
          isEnable: false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 30px;
}
</style>
